<template>
  <div class='list'>
    <ul>
      <li v-for="(item, index) in formatListData" :key="index">
        <p class="title">{{item.name}} <span class="fr">{{item.type==0?"":item.exchange&&item.exchange.sta==1?"已同意":item.exchange&&item.exchange.sta==2?"已拒绝":"申请中"}}</span></p>
        <p><span>时间：{{item.time}}</span><span class="fr">地点：{{item.room}}</span></p>
        <p>班级：{{item.class}}</p>
        <p>人数：{{item.nums}}</p>
        <p class="teacher-change">主考老师：<span :class="{'color-blue':myNumber==item.examiner_number}">{{item.examiner}}</span><img v-if="item.exchange&&item.examiner_number==item.exchange.i_number" :src="arrow_right" alt=""><span v-if="item.exchange&&item.examiner_number==item.exchange.i_number" :class="{'color-blue':myNumber==item.exchange.p_number}">{{item.exchange.p_name}}</span></p>
        <p class="teacher-change">监考老师：<span :class="{'color-blue':myNumber==item.invigilator_number}">{{item.invigilator}}</span><img v-if="item.exchange&&item.invigilator_number==item.exchange.i_number" :src="arrow_right" alt=""><span v-if="item.exchange&&item.invigilator_number==item.exchange.i_number" :class="{'color-blue':myNumber==item.exchange.p_number}">{{item.exchange.p_name}}</span></p>
        <p class="teacher-change">巡考老师：<span :class="{'color-blue':myNumber==item.inspection_number}">{{item.inspection}}</span><img v-if="item.exchange&&item.inspection_number==item.exchange.i_number" :src="arrow_right" alt=""><span v-if="item.exchange&&item.inspection_number==item.exchange.i_number" :class="{'color-blue':myNumber==item.exchange.p_number}">{{item.exchange.p_name}}</span></p>
        <p>备注：{{item.comments||"暂无"}}</p>

        <div class="btn-box" v-if="item.type==0&&!item.exchange||item.exchange.sta==0&&item.type==2">
          <van-button type="primary" v-if="!item.exchange" class="bc-gray btn ask-btn" @click="showAcheet(item)">申请调换</van-button>
          <van-button type="primary" v-if="item.exchange&&item.exchange.sta==0&&item.type!=1" class="bc-green btn" @click="setSure(item,1)">同意</van-button>
          <van-button type="primary" v-if="item.exchange&&item.exchange.sta==0&&item.type!=1" class="bc-gray btn cancel-btn" @click="setSure(item,2)">拒绝</van-button>
        </div>
      </li>
    </ul>
    <p class="no-data" v-show="listData.length==0">暂时没有数据哦~</p>
  </div>
</template>
<script>
export default {
  props:['listData','routerDetail',"getListData","selectData"],
  components: {},
  name: "",
  data() {
    return {
      arrow_right:require("../../../../../assets/images/new/arrow-right.png"),
      myNumber:"",
      id:"",
    };
  },
  computed:{
    formatListData(){
      return this.listData||[]
    }
  },
  methods: {
    /**
     * @name 确认或者拒绝
     */
    setSure(item,info){
      var params={
        id:item.exchange.id,
        sta:info
      }
      // console.log(params)
      // return
      _g.apiPost("invigilate/subexchange",params).then(res=>{
        _g.toMessage(res)
        if(!res.error)this.getListData()
      })
    },

    /**
     * @name 展示更换老师列表
     */
    showAcheet(item){
      this.id=item.id
      this.$store.state.dias.acheet.show=true
      this.$store.state.dias.acheet.columns=this.selectData.data1.map(val=>val.name)
      this.$store.state.dias.acheet.confirm=this.confirm
    },
    confirm(val){
      this.$store.state.dias.acheet.show=false
      var params={
        id:this.id,
        i_number:this.myNumber,
        p_number:this.selectData.data1.find(ele=>ele.name==val).number
      }
      _g.apiPost("invigilate/exchange",params).then(res=>{
        _g.toMessage(res)
        if(!res.error)this.getListData()
      })
    }
  },
  created() {
    this.myNumber=sessionStorage.getItem("number")
  }
};
</script>
<style lang="scss" scoped>
.list {

  li{
    padding: 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
    color: #666;
    line-height: 45px;

    .title{
      font-size: 15px;
      color: #333;
      line-height: 50px;
    }
    .teacher-change{
      display: flex;
    }
    img{
      height: 40px;
      margin: 0 20px;
    }
  }

  .btn-box{
    display: flex;
    margin: 10px 0;
  }
  .btn{
    width: 100%;
    font-size: 16px;
  }
  .cancel-btn,.ask-btn{
    color: #666;
  }

}
</style>